// 用户身份验证

// 获得昵称


const params = {
    status: '',
    channel_id: '',
    page: '1',
    per_page: '2',
}
let toatl = 0;
/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
async function getArtList() {
    await axios({
        url: '/v1_0/mp/articles',
        params,
    }).then(res => {
        // console.log(res.data.results);
        // console.log(res.data);
        toatl = res.data.total_count;
        document.querySelector('.total-count.page-now').innerHTML = `共${toatl}条`;
        document.querySelector('.page-now.page-item').innerHTML = ` 第${params.page}页 `;
        const artArr = res.data.results;
        const artList = document.querySelector('.art-list')
        let statusSpan = ''
        artList.innerHTML = artArr.map(item => {
            if (item.status === 2) {
                statusSpan = `<span class="badge text-bg-success">审核通过</span>`
            }else {
                statusSpan = `<span class="badge text-bg-primary">待审核</span>`
            }
            return `
            <tr>
                <td>
                  <img src="${item.cover.type === 0 ? `https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500` : item.cover.images[0]}" alt="">
                </td>
                <td>${item.title}</td>
                <td>
                  ${statusSpan}
                </td>
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td data-id='${item.id}'>
                  <i class="bi bi-pencil-square edit" data-id='${item.id}'></i>
                  <i class="bi bi-trash3 del data-id='${item.id}"></i>
                </td>
            </tr>
            `
        }).join('');
    })
}

// 调用函数
getArtList()


/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
const formSelect = document.querySelector('.form-select')
// 获取频道列表数据
async function getChannals() {
    await axios({
        url:"/v1_0/channels",
    }).then(res => {
        // console.log(res);
        const channels = res.data.channels;
        // console.log(channels);
        const selectStr = channels.map((item) => {
            return `<option value="${item.id}">${item.name}</option>`
        }).join('');
        formSelect.innerHTML = `<option value="" selected="">请选择文章频道</option>` + selectStr;
    })
}

getChannals();

document.querySelector('.sel-btn').addEventListener('click', e => {
    const checkInputArr = document.querySelectorAll('.form-check-input')
    checkInputArr.forEach(item => {
        if (item.checked) {
            params.status = item.value;
        }
    })
    console.log(params);
    
    params.channel_id = formSelect.value;
    getArtList();

})

/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
// 点击下一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.next').addEventListener('click', e => {
    if (params.page < Math.ceil(toatl/params.per_page)) {
        params.page++;
        getArtList();
    };
})
// 点击上一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.last').addEventListener('click', e => {
    if (params.page > 1) {
        params.page--;
        getArtList();
    };
})

/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */

document.querySelector('.art-list').addEventListener('click', e => {
    if (e.target.classList.contains('del')) {
        const delId = e.target.parentNode.dataset.id;
        console.log(delId);
        axios({
            url: `/v1_0/mp/articles/${delId}`,
            method: 'DELETE',
        }).then(res => {
            const children = document.querySelectorAll('.art-list tr').length;
            if(children === 1 && params.page !== 1) {
                params.page--;
            };
            getArtList();
        })
        
    };
})

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', e => {
    if (e.target.classList.contains('edit')) {
        const editId = e.target.parentNode.dataset.id;
        console.log(editId);
        location.href = `../publish/index.html?id=${editId}`;
    };
})




